<template>
  <div id="charges_rules_box">
    <div class="top_bar">
      <top-bar :title="title">
        <md-icon slot="left" class="back_btn"></md-icon>
      </top-bar>
    </div>
    <p class="city_style_name">{{ cityName }}</p>
    <p class="city_name">
      <span>运价更新日期：({{ cityDate }})</span>
    </p>
    <div class="pinche_num">
      <h6>一、计费规则</h6>
      <p class="hitche_rules_one">里程模式: X元/1km</p>
      <p class="hitche_rules_two">阶段模式:</p>
      <table class="tbl_content">
        <thead>
          <td>里程费</td>
        </thead>
        <tbody>
          <tr>
            <td>1.30元/公里（0~12公里）</td>
          </tr>
          <tr>
            <td>1.60元/公里（12~40公里）</td>
          </tr>
          <tr>
            <td>1.80元/公里（12~40公里）</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="pinche_num">
      <h6>二、计费规则</h6>
      <p class="hitch_rules_hd">1. 车型说明：</p>
      <p class="hitch_rules_text" style="color:#999">
        平台所有车型均为统一价格
      </p>
      <p class="hitch_rules_hd">2. 费用说明：</p>
      <p class="hitch_rules_text">（1）里程费：</p>
      <p class="hitch_rules_text_one">
        行程计价根据乘客行程起终点距离预先计算。订单一旦发布，行程价格即锁定，除后续添加感谢费外，系统不会再以任何理由
        改变价格。
      </p>
      <p class="hitch_rules_text">（2）感谢费：</p>
      <p class="hitch_rules_text_one">
        乘客可自主增加感谢费。建议您在以下情况下可以尝试添加：当等待时间较长，周边车主顺路度较低、或起终点位置较偏远等情况。通过增加感谢费的方式，可以吸引车主前来接单，提高您行程被接单的可能性，同时感谢费将全额发放给车主。
      </p>
    </div>
  </div>
</template>
<script>
import {
  Popup,
  PopupTitleBar,
  Picker,
  Selector,
  Dialog,
  Icon
} from 'mand-mobile';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Loading from '@/components/loading';
import TopBar from '@/components/TopBar';
import http from '@/common/http';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'rules-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Selector.name]: Selector,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Picker.name]: Picker
  },
  data() {
    return {
      title: '计价规则',
      cityName: '北京',
      cityDate: '2019-01-01'
    };
  },
  created() {
    if (this.$route.query.orderno) {
      let params = {
        orderNo: this.$route.query.orderno
      };
      Loading.show();
      http.post('/pakj/allotDriver/toShowValuationRule', params).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          console.log(res.data);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  }
};
</script>
<style lang="stylus">
p, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#charges_rules_box {
  height: 100%;
  background-color: #fff;

  .top_bar {
    position: absolute;
    top: 0px;
    z-index: 1000;
    width: 100%;
  }

  .back_btn {
    width: 22px;
    height: 38px;
  }

  .city_style_name {
    font-size: 48px;
    color: #333;
    text-align: center;
    padding-top: 90px;
  }

  .city_name {
    font-size: 32px;
    color: #333;
    text-align: center;
  }

  .city_name span {
    font-size: 26px;
    color: #666;
    padding-left: 20px;
    margin-top: 10px;
  }

  .tbl_content {
    margin-top: 10px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .tbl_content thead td {
    border-right: 1px solid #B8B8B8;
    border-top: 1px solid #B8B8B8;
    border-left: 1px solid #B8B8B8;
    color: #666;
    text-align: center;
    height: 60px;
    padding: 5px 5px;
    font-size: 26px;
  }

  .tbl_content tbody td {
    text-align: center;
    border: 1px solid #B8B8B8;
    color: #666;
    height: 60px;
    padding: 5px 5px;
    word-break: break-all;
    font-size: 26px;
  }

  .pinche_num {
    margin: 20px 30px;
  }

  .pinche_num h6 {
    font-size: 30px;
    color: #333;
    font-weight: 400;
  }

  .hitche_rules_one {
    font-size: 30px;
    color: #666;
    margin-top: 25px;
  }

  .hitche_rules_two {
    font-size: 30px;
    color: #666;
    margin-top: 25px;
  }

  .hitch_rules_hd {
    font-size: 30px;
    color: #666;
    margin-top: 40px;
  }

  .hitch_rules_text {
    font-size: 26px;
    color: #666;
    margin-top: 20px;
  }

  .hitch_rules_text_one {
    font-size: 26px;
    color: #999;
  }
}
</style>
